<script setup>
import { ref } from "vue";

const tabList = ref([
	{
		path: "/user/home",
		title: "首页",
		icon: "home-o",
		active: "https://oss.dingdongdr.com/static/user/home-active.png",
		inactive: "https://oss.dingdongdr.com/static/user/home.png",
	},
	{
		path: "/user/order",
		title: "订单",
		icon: "apps-o",
		active: "https://oss.dingdongdr.com/static/user/order-active.png",
		inactive: "https://oss.dingdongdr.com/static/user/order.png",
	},

	{
		path: "/user/mine",
		title: "我的",
		icon: "friends-o",
		active: "https://oss.dingdongdr.com/static/user/mine-active.png",
		inactive: "https://oss.dingdongdr.com/static/user/mine.png",
	},
]);
</script>
<template>
	<router-view v-slot="{ Component }">
		<component :is="Component" />
	</router-view>
	<div class="pb-[50px]"></div>
	<van-tabbar route>
		<van-tabbar-item replace v-for="(item, i) of tabList" :key="i" :to="item.path" :icon="item.icon">
			<template #icon="props"> <img :src="props.active ? item.active : item.inactive" /> </template>{{ item.title }}
		</van-tabbar-item>
	</van-tabbar>
</template>
